<template>
<div class="backstagemain">
    <h2 class="backstageheader">投诉处理</h2>
    <div class="backstagesearch">
        <div class="backstageuserstatus">
            <label>状态:</label>
            <select>
                <option>未处理</option>
                <option>已处理</option>
            </select>
        </div>
        <div class="namesearch">
            <label>投诉时间:</label>
            <input type="text" autocomplete="off" placeholder="请输入投诉时间">
        </div>
        <div class="backstagebuttons">
            <button class="backstagesearchbtn">搜索</button>
            <button class="backstagenewstart" @click="searchAppeals(1)">重置</button>
        </div>
    </div>
    <!-- <div class="control">
        <button type="button" class="deleteall">删除所选</button>
        <button type="button" class="add">新增</button>
    </div> -->
    <div class="backstagetablediv">
        <table class="backstagetable">
          <thead>
            <tr>
              <th>选择</th>
              <th>状态</th>
              <th>投诉时间</th>
              <th>投诉人</th>
              <th>投诉对象</th>
              <th>投诉原因</th>
              <th>操作</th>
            </tr>
          </thead>
            <tbody>
                <AppealItem       
                  v-for="(appealObj,id) in appeals" 
                  :key="id"
                  :appeal="appealObj"/>
            </tbody>
        </table>
    </div>
    <DividePage :maxsize="5" :changePage="changePage" :itemLength="appealLength" :pagesizes="pagesizes"/>
</div>
</template>

<script>
import axios from 'axios'
import AppealItem from './AppealItem.vue'
import DividePage from '../DividePage.vue'
export default {
    name: 'Foodadmin',
    components:{DividePage,AppealItem},
    // props:['actives'],
    data(){
        return{
            // appeals:[
            //     {
            //         id:'001',
            //         state:'未审核',
            //         type:'动态投诉',
            //         nickname:'观众',
            //         appealPerson:'国足',
            //         text:'在这样下去，就要输越南了',
            //         reason:'日内瓦，退钱！！！',
            //         photo:['https://p2.ssl.qhimgs1.com/sdr/400__/t01702a3800ed27dbc2.jpg','https://p2.ssl.qhimgs1.com/sdr/400__/t01702a3800ed27dbc2.jpg'],
            //     }
            // ],
            appeals:[],
            pagesizes:[5,10]
        }
    },
    methods:{
        changePage(value){
            this.searchAppeals(value)
        },
        searchAppeals(value){
            // 请求前更新list数据
            var a = this.$store.state.select-1
            var b = this.pagesizes[a]
            axios.get(`http://123.57.251.41:8080/audit/allPostReports?pageNo=${value}&pageSize=${b}`,{headers:{'Authentication-Token': JSON.parse(sessionStorage.getItem("token"))}}).then(
                response =>{
                    console.log('请求成功了')
                    console.log(response.data.data.list)
                    this.appeals = response.data.data.list
                    this.appealLength = response.data.data.total
                },
                error =>{
                    alert("请求失败了",console.log(error))
                }
            )
        },
    },
    mounted(){
        this.searchAppeals(1)
    }
}
</script>

<style lang="less" scoped>
</style>